<template>
  <el-card>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
    <el-row :gutter="20">
      <el-col :span='8'>
        <el-input placeholder="请输入内容"
                  v-model="params.query"
                  @clear='search'
                  clearable>
          <el-button slot="append"
                     @click="search"
                     @clear='getGoodList()'
                     icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span='4'>
        <el-button type="primary"
                   @click="$router.push('/goods/add')">增加</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="goodList"
              border="">
      <el-table-column type="index"
                       label="序号"></el-table-column>
      <el-table-column prop="goods_id"
                       label="ID"></el-table-column>
      <el-table-column prop="goods_name"
                       label="商品名称"></el-table-column>
      <el-table-column prop="goods_price"
                       label="价格"></el-table-column>
      <el-table-column prop="goods_number"
                       label="数量"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag type="info"
                  v-if="scope.row.goods_state===0">未审核</el-tag>
          <el-tag type="info"
                  v-if="scope.row.goods_state===1">审核中</el-tag>
          <el-tag type="info"
                  v-if="scope.row.goods_state===2">已审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否热销">
        <template slot-scope="scope">
          <el-tag type="info"
                  v-if="scope.row.is_promote">是</el-tag>
          <el-tag type="success"
                  v-else>否</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="add_time"
                       label="创建时间"></el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template>
          <el-button type="success"
                     round
                     size="mini"
                     icon="el-icon-edit"></el-button>
          <el-button type="danger"
                     round
                     size="mini"
                     icon="el-icon-delete"></el-button>

        </template>
      </el-table-column>

    </el-table>
    <!-- 分页器 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="params.pagenum"
                   :page-sizes="[10, 20, 30, 40]"
                   :page-size="params.pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  created() {
    this.getGoodList()
  },
  data() {
    return {
      params: {
        // 查询参数
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      //   弹框打开
      isAddShow: false,
      goodList: [],
      total: 0
    }
  },
  methods: {
    //   搜索查询
    search() {
      this.params.pagenum == 1
      this.getGoodList()
    },
    //   拉去参数
    async getGoodList() {
      const { data: res } = await this.$axios.get('goods', {
        params: this.params
      })
      if (res.meta.status !== 200) return this.$message.error(res.mate.msg)
      this.goodList = res.data.goods
      this.total = res.data.total
      console.log(this.goodList)
    },
    // 监听pagesize改变事件
    handleSizeChange(newSize) {
      this.params.pagesize = newSize
      this.getGoodList()
    },
    // 监听页码值改名事件
    handleCurrentChange(newpage) {
      this.params.pagenum = newpage
      this.getGoodList()
    }
  }
}
</script>

<style>
</style>
